<template>
  <view>
    <view class="banner">
      <view class="avatar">
        <image :src="userInfo.avatar || defaultAvatar" ></image>
      </view>
      <view class="info" v-if="token">
        <view class="up">{{userInfo.nick_name}}</view>
        <view class="down" @click="goLoginPage">{{userInfo.mobile}}</view>
      </view>
      <view class="info" v-else>
        <view class="up">未登录</view>
        <view class="down" @click="goLoginPage">点击登录账号</view>
      </view>
    </view>

    <view class="money">
      <view class="score">
        <view>
          <view class="top" v-if="token">{{ userInfo.balance }}</view>
          <view class="top" v-else>--</view>
          <view>账户余额</view>
        </view>
        <view>
          <view class="top" v-if="token">{{ userInfo.points }}</view>
          <view class="top" v-else>--</view>
          <view>积分</view>
        </view>
        <view>
          <view class="top" v-if="token">{{ userInfo.pay_money }}</view>
          <view class="top" v-else>--</view>
          <view>优惠券</view>
        </view>
      </view>
      <view class="wallet">
        <uni-icons type="map-filled" size="20"></uni-icons>
        <view>我的钱包</view>
      </view>
    </view>

    <view class="order">
      <view>
        <uni-icons type="list" size="22"></uni-icons>
        <view>全部订单</view>
      </view>
      <view>
        <uni-icons type="map" size="22"></uni-icons>
        <view>待支付</view>
      </view>
      <view>
        <uni-icons type="paperplane" size="22"></uni-icons>
        <view>待发货</view>
      </view>
      <view>
        <uni-icons type="home" size="22"></uni-icons>
        <view>待收货</view>
      </view>
    </view>

    <view class="service">
      <view class="title">我的服务</view>
      <view class="content">
        <view>
          <uni-icons type="location" size="20" color="red"></uni-icons>
          <text>收货地址</text>
        </view>
        <view>
          <uni-icons type="flag" size="20" color="red"></uni-icons>
          <text>领券中心</text>
        </view>
        <view>
          <uni-icons type="image" size="20" color="red"></uni-icons>
          <text>优惠券</text>
        </view>
        <view>
          <uni-icons type="contact-filled" size="20" color="red"></uni-icons>
          <text>我的帮助</text>
        </view>
        <view>
          <uni-icons type="checkmarkempty" size="20" color="red"></uni-icons>
          <text>我的积分</text>
        </view>
        <view>
          <uni-icons type="headphones" size="20" color="red"></uni-icons>
          <text>退款/售后</text>
        </view>
      </view>
    </view>

    <button class="logout" @click="logout">退出登录</button>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      userInfo:{}
    }
  },
  onLoad() {
    this.getUserInfo()
  },
  computed:{
    ...mapGetters(['defaultAvatar','token','userId'])
  },
  methods: {
    async getUserInfo() {
      const { data } = await this.$http.get('/user/info')
      this.userInfo = data.userInfo
    },    
    goLoginPage(){
      uni.navigateTo({
        url:'/pages_sub1/login/login'
      })
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出吗？',
        success (res) {
          if (res.confirm) {
            this.$store.commit('user/removeUserToken')
            uni.navigateTo({
              url:'/pages/home/home'
            })
          } else if (res.cancel) {
            console.log('取消')
          }
        }
      })

    }
  }
}
</script>

<style lang="scss">
  page {
    background-color: #fafafa;
  }
  image {
    width: 100%;
    height: 100%;
  }
  .banner {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 50rpx 0 0 30rpx;
    height: 300rpx;
    background: url('http://cba.itlike.com/public/mweb/static/background/user-header2.png') no-repeat center/cover;
    .avatar {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    .info {
      margin-left: 30rpx;
      color: #c59a46;
      .up {
        margin-bottom: 15rpx;
        font-weight: 700;
      }
      .down {
        font-size: 28rpx;
      }
    }
  }
  .money {
    box-sizing: border-box;
    display: flex;
    padding: 35rpx 0;
    height: 160rpx;
    background-color: #fff;
    .score {
      flex:3;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-right: 1rpx solid #f2f2f2;
      view {
        margin-bottom: 10rpx;
        text-align: center;
        font-size: 28rpx;
      }
      .top {
        margin-bottom: 20rpx;
        color: red;
      }
    }
    .wallet {
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 28rpx;
    }
  }

  .order {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 20rpx auto;
    width: 700rpx;
    height: 150rpx;
    background-color: #fff;
    text-align: center;

    font-size: 26rpx;
    view {
      margin-top: 10rpx;
    }
  }
  
  .service {
    margin: 20rpx auto;
    width: 700rpx;
    height: 380rpx;
    background-color: #fff;
    font-size: 28rpx;
    .title {
      padding: 20rpx;
    }
    .content {
      height: 300rpx;
      display: flex;
      flex-wrap: wrap;
      view {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:25%;
        text {
          margin-top: 10rpx;
        }
      }
    }
  }

  .logout {
    margin: 20rpx auto;
    width: 500rpx;
    height: 60rpx;
    background-color: #fafafa;
    line-height: 60rpx;
    font-size: 28rpx;
  }
</style>